<template>
    <div class="text" v-bind:class="{box:isBox,border:isBorder}">
        <div v-bind:class="{inner:isInner}">春夏</div>
        <div v-bind:class="classObject">秋冬</div>
        <div v-bind:class="classMeal">三餐四季</div>
    </div>
</template>

<script setup>
import {ref,reactive,computed} from 'vue'
const isBox=ref(true)
const isBorder=ref(true)
const isInner=ref(true)
const isMeal=ref(true)
const classObject=reactive({inner:true})
const classMeal=computed(()=>({
    meal:isMeal.value

}))
</script>

<style>
.text{
    text-align: center;
    line-height: 30px;
}
.box{
    width: 100%;
    background: linear-gradient(white,rgb(239,250,86));
}
.border{
    border:2px dotted black;
}
.inner{
    margin-top:2px;
    width:100px;
    height: 30px;
    border:2px double black;
}
.meal{
    width: 100px;
    height: 30px;
    border:2px dashed rgb(20,81,227)
}
</style>